<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>权限管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <script src="./js/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="main">
      <div class="container">
        <div class="left">
          <h4>用户</h4>
          <select multiple id="leftSelect">
            <option value="小花">小花</option>
            <option value="二狗">二狗</option>
            <option value="三叔">三叔</option>
            <option value="闷油瓶">闷油瓶</option>
            <option value="胡八一">胡八一</option>
            <option value="胖子">胖子</option>
            <option value="杨参谋">杨参谋</option>
          </select>
        </div>
        <div class="center">
          <a id="add">选中移动到右边</a>
          <a id="addAll">全部移动到右边</a>
          <a id="remove">选中移动到左边</a>
          <a id="removeAll">全部移动到左边</a>
        </div>
        <div class="right">
          <h4>管理员</h4>
          <select multiple id="rightSelect"></select>
        </div>
      </div>

      <table id="userList" class="user-list" cellspacing="0">
        <tr>
          <td>用户名</td>
          <td>权限</td>
        </tr>
      </table>
    </div>
    <script type="text/javascript" src="./js/index.js"></script>
  </body>
</html>
